import React, { useState, Fragment } from 'react';
import { Button, Alert } from 'antd';

const useStateConponent = () => {
    const [key, setKey] = useState(0);
    const [count, setCount] = useState(0);

    const addCount = () => {
        setCount(count + 1);
    };
    const addKey = () => {
        setKey(key + 1);
    };
    return (
        <Fragment>
            <Alert
                message="useState"
                description={`更新数据相当于this.setSate({[key]:value})`}
                type="info"
            />
            <p>count: {count}</p>
            <p>key: {key}</p>
            <Button onClick={addCount}>count + 1</Button>
            <Button onClick={addKey}>key + 1</Button>
        </Fragment>
    );
};

// class useStateConponent extends Component {
//     constructor(props) {
//         super(props)
//         this.state = {
//             count: 0,
//             key: 0
//         };
//     }

//     addCount = () => {
//         this.setState(state => ({
//             count: state.count + 1
//         }))
//     }

//     addKey = () => {
//         this.setState(state => ({
//             key: state.key + 1
//         }))
//     }

//     render() {
//         const { count, key } = this.state;
//         return <Fragment>
//             <Alert
//                 message="useState"
//                 description={`更新数据相当于this.setSate({[key]:value})`}
//                 type="info"
//             />
//             <p>count: {count}</p>
//             <p>key: {key}</p>
//             <Button onClick={this.addCount}>count + 1</Button>
//             <Button onClick={this.addKey}>key + 1</Button>
//         </Fragment>
//     }
// }

export default useStateConponent;
